import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  // 定义全局状态，相当于一个全局的data
  state: {
    todoItem: localStorage.getItem('todo')
      ? [...JSON.parse(localStorage.getItem('todo'))]
      : [
        { name: '吃饭', done: true },
        { name: '睡觉', done: true },
        { name: '打豆豆', done: false },
      ],
  },
  // 定义操作具体的调用通过action去实现
  mutations: {
    // 添加一个todo
    ADD_ITEM(state, obj) {
      state.todoItem.push(JSON.parse(JSON.stringify(obj)));
      localStorage.setItem('todo', JSON.stringify(state.todoItem));
      console.log(state.todoItem);
    },
    // 完成一个todo
    REMOVE_ITEM(state, name) {
      // 通过name去找对应的下标findIndex()方法可以通过具体项去得到对应的下标，如果没有找到则返回-1
      const index = state.todoItem.findIndex((item) => item.name === name);
      state.todoItem[index].done = !state.todoItem[index].done;
      localStorage.setItem('todo', JSON.stringify(state.todoItem));
    },
    // 删除一个todo
    DELETE_ITEM(state, name) {
      const index = state.todoItem.findIndex((item) => item.name === name);
      state.todoItem.splice(index, 1);
      localStorage.setItem('todo', JSON.stringify(state.todoItem));
    },
    UPDATE_ITEM(state, obj) {
      const index = state.todoItem.findIndex(
        (item) => item.name === obj.oldName
      );
      console.log(index);
      const item = { name: obj.newName, done: false };
      state.todoItem.splice(index, 1, item);
      localStorage.setItem('todo', JSON.stringify(state.todoItem));
    },
  },
  // 提交mutation 逻辑与异步请求一般写在这里
  actions: {
    addItem({ commit }, obj) {
      commit('ADD_ITEM', obj);
    },
    removeItem({ commit }, name) {
      commit('REMOVE_ITEM', name);
    },
    deleteItem({ commit }, name) {
      commit('DELETE_ITEM', name);
    },
    updateItem({ commit }, obj) {
      commit('UPDATE_ITEM', obj);
    },
  },
  // 通过getter方法去得到state里面的一些特定项
  getters: {
    // 已完成的
    doneTodos: (state) => {
      return state.todoItem.filter((todo) => {
        return todo.done === true;
      });
    },
    // 所有的
    allTodos: (state) => {
      return state.todoItem;
    },
    // 正在进行中的
    activeTodos: (state) => {
      return state.todoItem.filter((todo) => todo.done === false);
    },
  },
  modules: {},
});
